<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>缓存全局变量</h1>
      <p>
        将使用中无法避免的全局变量缓存到局部(比如查找DOM元素,必须使用到document)
      </p>
    </div>
    <div>
      <input type="button" value="btn" id="btn1" />
      <input type="button" value="btn" id="btn2" />
      <input type="button" value="btn" id="btn3" />
      <input type="button" value="btn" id="btn4" />
      <p>123456</p>
      <input type="button" value="btn" id="btn5" />
      <input type="button" value="btn" id="btn6" />
      <input type="button" value="btn" id="btn7" />
      <p>123456</p>
      <input type="button" value="btn" id="btn8" />
      <input type="button" value="btn" id="btn9" />
      <p>123456</p>
      <input type="button" value="btn" id="btn10" />
    </div>
    <script>
      //下面两个函数,第二个函数使用了缓存,
      //通过工具测试得知,使用了缓存的函数性能略高于没有使用缓存的
      //没有使用缓存
      function getBtn1() {
        let oBtn1 = document.getElementById("btn1");
        let oBtn3 = document.getElementById("btn3");
        let oBtn5 = document.getElementById("btn5");
        let oBtn7 = document.getElementById("btn7");
        let oBtn9 = document.getElementById("btn9");
      }

      //使用了缓存
      function getBtn2() {
        let obj = document; //缓存
        let oBtn1 = obj.getElementById("btn1");
        let oBtn3 = obj.getElementById("btn3");
        let oBtn5 = obj.getElementById("btn5");
        let oBtn7 = obj.getElementById("btn7");
        let oBtn9 = obj.getElementById("btn9");
      }
    </script>
  </body>
</html>
